<!--学位考试管理-->
<template>
  <div class="courseBox">
    <div class="courseBoxTop">
      <div class="courseBoxTopSearch">
        <div class="courseName">
          <span>学位名称：</span>
          <el-input
            v-model="formSearch.degreeName"
            placeholder="请输入学位名称"
          />
        </div>
        <div class="profession">
          <span>学位类型：</span>
          <el-select
            v-model="formSearch.degreeType"
            placeholder="请选择学位类型"
          >
            <el-option
              v-for="item in option"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeName"
            ></el-option>
          </el-select>
        </div>
        <div class="version">
          <span>状态：</span>
          <el-select v-model="formSearch.state" placeholder="状态">
            <el-option label="未发布" value="0"></el-option>
            <el-option label="报名中" value="1"></el-option>
            <el-option label="已截止" value="2"></el-option>
          </el-select>
        </div>

        <div class="searchAndReset">
          <el-button class="searchBtn" @click="searchInput">
            <i class="el-icon-search"></i>
            <span>搜索</span>
          </el-button>
          <el-button class="resetBtn" @click="refreshInput">
            <i class="el-icon-refresh"></i>
            <span>重置</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 管理列表 -->
    <div class="courseBoxBottom">
      <div class="bottomHeader">
        <span class="title">管理列表</span>
        <div class="bottomHeaderBtn">
          <el-button class="addBtn" @click="openAddCourse">
            <i class="el-icon-plus"></i>
            <span>新增</span>
          </el-button>
          <el-button class="delBtn" @click="batchDel">
            <i class="el-icon-close"></i>
            <span>批量删除</span>
          </el-button>
        </div>
      </div>

      <!-- 表格 -->
      <div class="bottomMian">
        <el-table
          :data="tableData"
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column prop="degreeName" label="学位名称"></el-table-column>
          <el-table-column prop="degreeType" label="学位类型"></el-table-column>
          <el-table-column
            prop="theExaminationRoom"
            label="考场"
          ></el-table-column>
          <el-table-column
            prop="theTestPlace"
            label="考试地点"
          ></el-table-column>
          <el-table-column prop="cost" label="报名费用"></el-table-column>
          <el-table-column prop="testStartTime" label="考试时间" width="300">
            <template slot-scope="scope">
              <span class="fontSize">
                {{ scope.row.testStartTime }} ~ {{ scope.row.testEndTime }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="deadline" label="报名时间" width="300">
            <template slot-scope="scope">
              <span class="fontSize">
                {{ scope.row.registrationStartTime }} ~
                {{ scope.row.registrationEndTime }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="80">
            <template slot-scope="scope">
              {{
                scope.row.state == "0"
                  ? "未发布"
                  : scope.row.state == "1"
                  ? "报名中"
                  : "已截止"
              }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <span
                class="icon iconfont icon-bianji"
                @click="handleEdit(scope.row)"
              ></span>
              <span
                class="icon iconfont icon-shanchu"
                @click="handleDel(scope.row.id)"
              ></span>
              <span type="text" class="copy" @click="release(scope.row)">
                发布
              </span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
          <div class="jumper">
            跳到第
            <input type="text" ref="currentPage" value="1" />
            页
          </div>
          <button class="submit" @click="goPage">确定</button>
        </div>
      </div>
    </div>

    <!-- 新增学位考试 -->
    <div class="dialog">
      <el-dialog
        :title="isEdit ? '编辑学位考试' : '添加学位考试'"
        :visible.sync="dialogFormVisible"
        center
      >
        <el-form
          ref="form"
          label-position="right"
          :model="form"
          label-width="100px"
        >
          <el-form-item label="学位名称">
            <el-input
              v-model="form.degreeName"
              placeholder="请输入学位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="学位类型">
            <el-select v-model="form.degreeType" placeholder="请选择学位类型">
              <el-option
                v-for="item in option"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考场">
            <el-select
              v-model="form.theExaminationRoom"
              placeholder="请选择考场"
            >
              <el-option
                v-for="item in option2"
                :key="item.id"
                :label="item.condition"
                :value="item.condition"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试地点">
            <el-input
              v-model="form.theTestPlace"
              placeholder="请输入考试地点"
            ></el-input>
          </el-form-item>
          <el-form-item label="报名费用">
            <el-input
              v-model="form.cost"
              placeholder="请输入报名费用"
            ></el-input>
          </el-form-item>
          <el-form-item label="考试时间">
            <el-col :span="11">
              <el-form-item prop="testStartTime">
                <el-date-picker
                  placeholder="开始时间"
                  v-model="form.testStartTime"
                  type="datetime"
                  style="width: 46%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="testEndTime">
                <el-date-picker
                  placeholder="结束时间"
                  type="datetime"
                  v-model="form.testEndTime"
                  style="width: 46%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="报名时间" label-width="100px">
            <el-col :span="11">
              <el-form-item prop="registrationStartTime">
                <el-date-picker
                  placeholder="开始时间"
                  type="datetime"
                  v-model="form.registrationStartTime"
                  style="width: 46%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="registrationEndTime">
                <el-date-picker
                  placeholder="结束时间"
                  type="datetime"
                  v-model="form.registrationEndTime"
                  style="width: 46%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeAddCourse">取 消</el-button>
          <el-button type="primary" @click="confirmAddCourse">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import "@/styles/picture.scss";
import { getClassifyListApi } from "@/api/basics/classify";
import { _debounce } from "../../utils/debounce";
import {
  getDegreeExamListApi,
  addDegreeExamListApi,
  delDegreeExamListApi,
  editDegreeExamListApi,
} from "../../api/selfStudy/degreeexamination";
import moment from "moment";
export default {
  data() {
    return {
      isEdit: false, // 是否编辑
      dialogFormVisible: false, // 是否开启弹框
      // 搜索数据
      formSearch: {
        degreeName: "",
        degreeType: "",
        state: "",
      },
      //弹框数据
      form: {
        id: "",
        degreeName: "",
        degreeType: "",
        theExaminationRoom: "",
        theTestPlace: "",
        cost: "",
        testStartTime: "",
        testEndTime: "",
        registrationStartTime: "",
        registrationEndTime: "",
      },
      // 学位类型
      option: [
        { typeId: 214, typeName: "研究生" },
        { typeId: 213, typeName: "博士生" },
      ],
      // 考场
      option2: [
        { id: 1, condition: "第一考场" },
        { id: 2, condition: "第二考场" },
        { id: 3, condition: "第三考场" },
      ],
      tableData: [], // 列表数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 总条数
      multipleSelection: [], // 已选中数据
    };
  },

  created() {
    // 获取学位列表
    this.getDegreeExamList({
      pageNum: this.currentPage,
      pageSize: this.pageSize,
    });

    // 获取条件类型列表
    this.getTypeList({
      parentId: 212,
    });
  },

  methods: {
    // 获取学位列表
    async getDegreeExamList(data) {
      let res = await getDegreeExamListApi(data);
      this.tableData = res.rows;
      this.total = res.total;
    },

    // 获取条件类型列表
    async getTypeList(data) {
      let res = await getClassifyListApi(data);
      this.option = res.rows;
    },

    // 搜索
    searchInput: _debounce(function () {
      this.getDegreeExamList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.formSearch,
      });
    }, 500),

    // 重置
    refreshInput: _debounce(function () {
      this.formSearch = {
        degreeName: "",
        degreeType: "",
        state: "",
      };
      this.getDegreeExamList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    }, 500),

    // 新增
    openAddCourse() {
      this.form = {
        id: "",
        degreeName: "",
        degreeType: "",
        theExaminationRoom: "",
        theTestPlace: "",
        cost: "",
        testStartTime: "",
        testEndTime: "",
        registrationStartTime: "",
        registrationEndTime: "",
      };
      this.isEdit = false;
      this.dialogFormVisible = true;
    },

    // 编辑
    handleEdit(row) {
      this.form = {
        ...row,
        testStartTime: new Date(row.testStartTime).toString(),
        testEndTime: new Date(row.testEndTime).toString(),
        registrationStartTime: new Date(row.registrationStartTime).toString(),
        registrationEndTime: new Date(row.registrationEndTime).toString(),
      };
      this.isEdit = true;
      this.dialogFormVisible = true;
    },

    // 取消新增/ 编辑
    closeAddCourse() {
      this.form = {
        id: "",
        degreeName: "",
        degreeType: "",
        theExaminationRoom: "",
        theTestPlace: "",
        cost: "",
        testStartTime: "",
        testEndTime: "",
        registrationStartTime: "",
        registrationEndTime: "",
      };
      this.dialogFormVisible = false;
    },

    // 确定
    confirmAddCourse: _debounce(function () {
      this.form = {
        ...this.form,
        testStartTime: moment(this.form.testStartTime).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        testEndTime: moment(this.form.testEndTime).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        registrationStartTime: moment(this.form.registrationStartTime).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        registrationEndTime: moment(this.form.registrationEndTime).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
      };

      if (this.isEdit) {
        this.$message("修改中~");
        editDegreeExamListApi(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功！");
            this.dialogFormVisible = false;
            // 获取学位列表
            this.getDegreeExamList({
              pageNum: this.currentPage,
              pageSize: this.pageSize,
            });
          } else {
            this.$message.error("修改失败！");
          }
        });
      } else {
        this.$message("添加中~");
        addDegreeExamListApi(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("添加成功！");
            this.dialogFormVisible = false;
            // 获取学位列表
            this.getDegreeExamList({
              pageNum: this.currentPage,
              pageSize: this.pageSize,
            });
          } else {
            this.$message.error("添加失败！");
          }
        });
      }
    }, 500),

    //删除
    handleDel(ids) {
      this.$confirm("确认删除当前数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delDegreeExamListApi({ ids }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功!");
              // 获取学位列表
              this.getDegreeExamList({
                pageNum: this.currentPage,
                pageSize: this.pageSize,
              });
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 批量删除
    batchDel() {
      let data = [...this.multipleSelection].map((item) => {
        return "" + item.id;
      });
      let ids = data.join(",");
      if ([...this.multipleSelection].length > 0) {
        this.$confirm("确认删除当前数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delDegreeExamListApi({ ids }).then((res) => {
              if (res.code === 200) {
                this.$message.success("删除成功!");
                // 获取学位列表
                this.getDegreeExamList({
                  pageNum: this.currentPage,
                  pageSize: this.pageSize,
                });
              } else {
                this.$message.error("删除失败!");
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message.error("请选择要删除的数据!");
      }
    },

    // 发布
    release(data) {
      console.log(data);
      if (data.state == "0") {
        this.$confirm("是否发布当前数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            editDegreeExamListApi({ id: data.id, state: "1" }).then((res) => {
              if (res.code === 200) {
                this.$message.success("发布成功!");
                this.dialogFormVisible = false;
                // 获取学位列表
                this.getDegreeExamList({
                  pageNum: this.currentPage,
                  pageSize: this.pageSize,
                });
              } else {
                this.$message.error("发布失败!");
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消发布",
            });
          });
      } else if (data.state == "1") {
        this.$message("报名中，不能重新发布!");
      } else if (data.state == "2") {
        this.$message("已截止，不能重新发布!");
      }
    },

    // 已选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDegreeExamList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.formSearch,
      });
    },

    // 跳转当前页
    goPage() {
      let { value } = this.$refs.currentPage;
      this.currentPage = Number(value);
      this.getDegreeExamList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.formSearch,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.courseBox {
  width: 100%;
  padding: 10px;
  .fontSize {
    font-size: 14px;
  }

  .copy {
    color: #4b93d5;
    cursor: pointer;
  }

  .top {
    width: 100%;
    margin-bottom: 10px;
  }

  .dialog {
    .line {
      text-align: center;
    }
    .block {
      width: 280px;
      height: 30px;
      border: solid 1px #dcdfe6;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #fff;

      ::v-deep .el-input__inner {
        width: 240px;
        height: 28px;
        border: none;
      }

      ::v-deep .el-icon-arrow-down {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-icon-arrow-up {
        color: #c2c2c2;
        padding: 0 10px 0 0;
      }

      ::v-deep .el-date-picker.has-sidebar {
        left: 460px !important;
        background-color: #4895db;
      }
    }

    ::v-deep .el-dialog {
      max-width: 750px;
      min-width: 500px;
      border-radius: 10px;
      background-color: #f9f9f9;
    }

    ::v-deep .el-dialog__header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: #4895db;
      padding: 0;
      border-radius: 10px 10px 0 0;

      span {
        font-size: 16px;
        color: #fff;
      }
    }

    ::v-deep .el-select > .el-input {
      display: block;
      width: 300px;
    }

    ::v-deep .el-form-item__label {
      line-height: 32px;
    }

    ::v-deep .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .el-dialog__headerbtn {
      top: 15px;
    }

    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 18px;
    }

    ::v-deep .el-dialog--center .el-dialog__body {
      text-align: initial;
      display: flex;
      justify-content: center;
    }

    ::v-deep .el-input__icon {
      line-height: 30px;
    }

    ::v-deep .el-form-item__content {
      width: 300px;
      line-height: 30px;
    }

    ::v-deep .el-form-item {
      margin-bottom: 15px;
    }

    ::v-deep .el-dialog__footer {
      padding: 10px 20px 40px;
    }

    // ::v-deep .el-button + .el-button {
    //   border-radius: 20px;
    //   margin-left: 50px;
    //   background-color: #4895db;
    //   border-color: #4895db;
    // }
  }
}
</style>